<template>
  <div class="classify-con">
    <div class="classify-con-left">
      <ul>
        <li
          class="classify-left"
          v-for="(list, index) of leftData"
          :key="index"
          :class="{ active:index===classifyIndex }"
          @click="changeLeft(index)"
          >
          {{ list.name }}
        </li>
        <!-- <li class="classify-left">
          苹果
        </li>
        <li class="classify-left">
          苹果
        </li>
        <li class="classify-left">
          苹果
        </li>
        <li class="classify-left">
          苹果
        </li> -->
      </ul>
    </div>
    <div class="classify-con-right">
        <ul>
          <li class="classify-right"
            v-for="(list, index) of rightData.rigth_data"
            :key="index"
            @click="goDetails(list.id)"
            >
            <img :src='list.img' alt="图片加载中ing">
            <p class="classify-right-name">{{ list.name }}</p>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      leftData: [],
      rightData: [],
      rightList: [],
      classifyIndex: 0

    }
  },
  created() {
    var that = this
    axios.get('/static/ceshi.json').then(function(res){
      // left：取出左边数据
      that.leftData = res.data.data.classify.left
      // 取出右边数据,
      that.rightList = res.data.data.classify.right
      // right：获取到数组中第一组数据，里面包含了所有数据
      that.rightData = that.rightList[0]
      // console.log(res.data.data.classify.right[1])
    })
  },
  methods: {
    // 左边栏切换 右边联动
    changeLeft(index){
      // vue里面改变了this指向问题
      var that = this
      // 将传入的index
      that.classifyIndex = index
      that.rightData = that.rightList[index]
    },

    // 进入详情页面
    goDetails(id){
      console.log(id)
      //
      this.$router.push({
        path: 'Detail',
        query: {
          id: id
        }
      })
    }

  },
}
</script>

<style lang="less">
  .classify-con{
    width: 100%;
    // background: white;
    padding-top: 1.5rem;
    padding-bottom: 1.4rem;
    // 实现撑满颜色
    position: absolute;
    top: 0;
    bottom: 0;
    background: #50a6d1;
    display: flex;
    .classify-con-left{
      width: 25%;
      flex: 1;
      .classify-left{
        width: 100%;
        height: 1.3rem;
        text-align: center;
        line-height: 1.3rem;
        background: #50a6d1;
        color: white;
        font-size: .36rem;
        border-bottom: 1px solid white;
      }
      .active{
        border-left: 2px solid #50a6d1;
        background: white;
        color: #50a6d1;
      }
    }

    .classify-con-right{
      width: 75%;
      display: flex;
      background: white;
      height: 100%;
      ul{
        width: 100%;
        .classify-right{
          width: 33.33%;
          display: flex;
          justify-content: center;
          justify-items: center;
          flex-direction: column;
          text-align: center;
          float: left;
          img{
            width: 1.8rem;
            height: 2rem;
            display: block;
            margin: .3rem auto .1rem;
            padding: 0.16rem;
          }
          .classify-right-name{
            font-size: .32rem;
            color: #888;
          }
        }
      }
    }
  }
</style>
